<template>
    <view 
        ref="message"
        :id="viewId"
        :class="[
            'chat',
            isSelf ? 'chat-right' : 'chat-left'
        ]"
    >
        <view :id="'content-' + index" class="chat-content" @longpress="$emit('onContentLongpress', $event)">
            <slot v-if="isContent" name="content"></slot>
            <template v-else>
                <text class="chat-text">{{ messageData.text }}</text>
                <view v-if="messageData.image.length">
                    <image 
                        v-for="(url,imgIndex) in messageData.image" :key=" imgIndex" 
                        class="chat-img" 
                        mode="widthFix"
                        :src="url"
                        @click="previewImage(url)" 
                    ></image>
                </view>
            </template>
            
        </view>
    </view>
</template>

<script>
    // #ifdef APP-NVUE
    const animation = uni.requireNativePlugin('animation')
    // #endif
    /**
     * 聊天消息体
     * @author liruilin
     */
    export default {
        props: {
            messageData: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            viewId: {
                type:String,
                default: 'message-cell'
            },
            index: {
                type: Number,
                default: 0
            },
            isSelf: {
                type: Boolean,
                default: false
            },
            // 因微信小程序不支持在 template v-slot时使用v-if，所以这里单独添加一个属性来判断插槽
            isContent: {
                type: Boolean,
                default: false
            }
        },
        mounted() {
            // #ifdef APP-NVUE
            animation.transition(this.$refs['message'], {
                styles: {
                    opacity: 1,
                    transform: 'translateY(0rpx)',
                },
                duration: 500, //ms
                timingFunction: 'ease',
                delay: 100 //ms
            },()=>{
                
            })
            // #endif
            
        },
        methods: {
            previewImage(url){
                uni.previewImage({
                    urls: [url]
                })
            }
        }
    }
</script>

<style lang="scss">
    .chat{
        margin-bottom: 40rpx;
        flex-direction: row;
        padding-top: 5rpx;
        padding-bottom: 5rpx;
        padding-right: 5rpx;
        padding-left: 5rpx;
        /* #ifndef APP-NVUE */
        animation: chatShow 1s;
        /* #endif */
        /* #ifdef APP-NVUE */
        opacity: 0;
        transform: translateY(30rpx);

        /* #endif */
        overflow: hidden;
        transform-origin: center top; 
    }
    @keyframes chatShow
    {
        0%   {
            opacity: 0;
            transform: translateY(30rpx);
        }
        100% {
            opacity: 1;
            transform: translateY(0rpx);
        }
    }
    .chat-left{
        .chat-content{
            background-color: #ffffff;
        }
        .chat-text{
            color: #000;
        }
    }
    .chat-right{
        flex-direction: row-reverse;
       
        .chat-content{
            background-color: #95ec69;
        }
        .chat-text{
            color: #000;
        }
    }
    .chat-content{
        flex-grow: 0;
        max-width: 600rpx;
        padding: 15rpx 20rpx;
        border-radius: 10rpx;
        box-shadow: 0 0 5rpx 0 rgba(0,0,0,0.1);  
    }
    .chat-text{
        max-width: 470rpx;
        font-size: 36rpx;
        white-space: pre-wrap;
        word-wrap: break-word; 
        line-height: 46rpx;
    }
    .chat-img{
        width: 400rpx;
        // height: 400rpx;
        margin-top: 20rpx;
    }
</style>